import { darkTheme, GlobalThemeOverrides } from 'naive-ui'
import Color from 'color'
import { useTheme } from '@/store/modules/theme'
import { darkMode as darkModeMenu } from '~/types/theme'
// 返回暗黑主题
export const useDarkThemeHook = () => {
  const theme = useTheme()
  setHtmlTheme(theme.darkMode)
  return computed(() =>
    theme.darkMode === darkModeMenu.DARK ? darkTheme : undefined
  )
}

/**
 * * 修改主题色
 * @param themeName 主题名称
 * @returns
 */
export const setHtmlTheme = (themeName?: string) => {
  const e = window.document.documentElement
  if (themeName) {
    e.setAttribute('data-theme', themeName)
    return
  }
}

/**
 * * 设置全局主题
 */
export const useThemeOverridesHook = () => {
  const theme = useTheme()
  const { primary } = toRefs(theme)
  const darkTheme = computed((): GlobalThemeOverrides => {
    // 通用
    const commonObj = {
      common: {
        primaryColor: primary.value,
        primaryColorHover: lighten(alpha(primary.value), 0.1),
        primaryColorPressed: lighten(alpha(primary.value), 0.1),
        primaryColorSuppl: primary.value,
        borderRadius: '6px'
      }
    }
    // 组件
    const componentsObj = {
      Card: {
        titleFontWeight: '600'
      },
      Alert: {
        titleFontWeight: '600'
      }
    }
    // 亮色主题
    const lightObject = {
      common: {
        ...commonObj.common,
        textColor: 'rgb(51, 54, 57)',
        iconColor: '#333',
        primaryColorAlpha: alpha(primary.value, 0.1)
      },
      ...componentsObj
    }
    // 暗色主题
    const dartObject = {
      common: {
        ...commonObj.common,
        textColor: '#fff',
        iconColor: '#fff',
        primaryColorAlpha: alpha(primary.value, 0.2)
      },
      ...componentsObj,
      LoadingBar: {
        colorLoading: primary.value
      }
    }
    return theme.darkMode === darkModeMenu.DARK ? dartObject : lightObject
  })
  return darkTheme
}

/**
 * * 颜色变亮
 * hsl(100, 50%, 10%) -> hsl(100, 50%, 50%)
 * @param color 颜色
 * @param concentration 0~1 浓度
 * @returns
 */
export function lighten(color: string, concentration: number) {
  return Color(color).lighten(concentration).toString()
}
export function alpha(color: string, alpha = 1) {
  return Color(color).alpha(alpha).toString()
}

export function iconColor() {
  const theme = useTheme()
  return theme.darkMode === darkModeMenu.DARK ? '#fff' : '#333'
}
/**
 * @description: 把rgba格式颜色变成rgb格式
 * @param {string} color rgb颜色 格式: rgb(0,0,0,0)
 * @param {*} background 背景颜色 格式: rgb(255,255,255)
 * @return {*}
 */
export function rgbaToRgb(
  color: string,
  background = 'rgb(255,255,255)'
): string {
  const rgbaAttr: RegExpMatchArray | null = color.match(/[\d.]+/g)
  if (rgbaAttr && rgbaAttr.length >= 4) {
    const r: number = parseInt(rgbaAttr[0]),
      g: number = parseInt(rgbaAttr[1]),
      b: number = parseInt(rgbaAttr[2]),
      alpha: number = parseFloat(rgbaAttr[3])
    let nweR: number, newG: number, newB: number
    const bkgAttr: RegExpMatchArray | null = background.match(/[\d.]+/g)
    if (bkgAttr) {
      nweR = r * alpha + parseInt(bkgAttr[0]) * (1 - alpha)
      newG = g * alpha + parseInt(bkgAttr[1]) * (1 - alpha)
      newB = b * alpha + parseInt(bkgAttr[2]) * (1 - alpha)

      return 'rgb(' + nweR + ',' + newG + ',' + newB + ')'
    } else {
      return color
    }
  } else {
    return color
  }
}
/**
 * @description: 十六进制rgb变成10进制 #fff -> rgb(255, 255, 255)
 * @param {string} color
 * @return {*}
 */
export function rgbWordToNumber(color: string): string {
  return Color(color).toString()
}

/**
 * @description: 将颜色变淡
 * @param {string} color
 * @param {number} alphaNumber
 * @return {string}
 */
export function handleRgbaToRgb(color: string, alphaNumber: number) {
  const rgba = alpha(rgbWordToNumber(color), alphaNumber)
  return rgbaToRgb(rgba)
}
